<template>
  <section>
    <el-dialog 
      :value="value"
      :title="role.id == 0 ? '添加角色' : '编辑角色' " 
      :visible.sync="visible"
      @close="close"
      width="500px"
    >
      <el-form 
        :model="role" 
        :rules="$rules.role" 
        ref="roleForm"
      >
        <!--<el-form-item
          label="所属应用" 
          :label-width="labelWidth" 
          prop="appId">
          <el-select 
            v-model="role.appId" 
            placeholder="请选择应用">
            <el-option
              v-for="(item,index) in applications"
              :key="index"
              :label="item.code +' - ' +item.description"
              :value="item.id"/>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item
          label="角色编码" 
          :label-width="labelWidth" 
          prop="code">
          <el-input 
            v-model="role.code" 
            auto-complete="off" 
            suffix-icon="fa fa-code" 
            placeholder="请填写角色编码"/>
        </el-form-item>-->
        <el-form-item 
          label="角色名称" 
          :label-width="labelWidth" 
          prop="name"
        >
          <el-input 
            v-model="role.name" 
            auto-complete="off" 
            suffix-icon="fa fa-vcard" 
            placeholder="请填写角色名称"
          />
        </el-form-item>
        <el-form-item 
          label="角色描述" 
          :label-width="labelWidth" 
          prop="description"
        >
          <el-input 
            v-model="role.description" 
            auto-complete="off" 
            type="textarea"
            :rows="2"
            placeholder="请填写角色描述"
          />
        </el-form-item>
      </el-form>
      <span 
        slot="footer" 
        class="dialog-footer"
      >
        <el-button 
          size="small" 
          @click="cancle('roleForm')"
        >取 消</el-button>
        <el-button 
          size="small" 
          type="primary" 
          @click="submit('roleForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
export default {
  name: "AddAndEdit",
  data() {
    return {
      visible: false,
      labelWidth: "",
      role: { id: 0 },
      applications: []
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.visible = val.show;
        this.applications = val.applications;
        this.labelWidth = val.labelWidth || "120px";
        this.role = val.role;
      }
    },
    visible(val) {
      if (!val) this.$emit("on-show-change", this.$data);
    }
  },
  created() {},
  methods: {
    close() {
      this.cancle('roleForm')
    },
    cancle(formName) {
      this.$refs[formName].clearValidate();
      this.visible = false;
      this.role = {
        id: 0
      };
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const callback = () => {
            this.cancle(formName);
          };
          this.role.id
            ? this.$api.role.update(
                {
                  id: this.role.id,
                  name: this.role.name,
                  description: this.role.description,
                  status: this.role.status.value
                },
                callback
              )
            : this.$api.role.save(this.role, callback);
        } else {
          return false;
        }
      });
    }
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          show: false,
          labelWidth: "120px",
          role: {
            id: 0
          },
          applications: []
        };
      }
    }
  }
};
</script>
